<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="js/easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/easyui-1.3.5/themes/icon.css" />
<script src="js/easyui-1.3.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/easyui-1.3.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tree.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<body class="easyui-layout">
<!-- 西部区域 -->
<div region="west" split="true" title="导航菜单" style="width:250px;padding:10px">
	<!--树形菜单-->
	<ul id="tree"></ul>
</div>
<!-- 中部区域 -->
<div region="center" title="欢迎使用">
	<div id="tabs" class="easyui-tabs" fit="true" border="false">
		<div title="首页">应用检测</div>
	</div>
</div>

</body>
<script type="text/javascript">
window.onload = function() {
	init();
}

function init() {
	initTree();
}

function initTree() {
	//实例化树形菜单
	$("#tree").tree({
		data: treeData,
		lines: true,
		onClick: function(node) {
			if(node.attributes) {
				var iframe = getIFrame(node.attributes.url);
				addTab(node.text, iframe);
			}
		}
	});
	$("tree").tree("collapseAll");
}

function getIFrame(url) {
	return '<iframe width="100%" height="100%" frameborder="0" src="' + url +
		' "style="width:100%;height:100%; margin:0px 0px;"></iframe>'
}

function addTab(title, content) {
	if($("#tabs").tabs("exists", title)) {
		$("#tabs").tabs("select", title);
	} else {
		$("#tabs").tabs("add", {
			title: title,
			closable: true,
			content: content,
		});
	}
}
</script>

</html>